import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class list extends Component {
    state = {
        users:[],//用户数据
        isFirst:true,//是否第一次登陆
        isLoading:false,//是否加载中
        isErorrMessage:''
        
    }
    
    //主键初始化订阅显示数据 生命周期
    // static getDerivedStateFromProps(props, state) {
    //     PubSub.subscribe('showMessage',(msg,data) => {
                       
    //     })
    //     return null
    // }
    componentDidMount(){
        this.token = PubSub.subscribe('showMessage',(msg,data) => {
            this.setState(data)
        })
    }
    //主键销毁 停止订阅
    componentWillUnmount() {
        PubSub.unsubscribe(this.token);
    }
    
    render() {
        const { isFirst,isErorrMessage,isLoading } = this.state
        return (
            <div className="row">
                {
                    
                    isFirst ? <h3>请输入查询关键字，点击按钮查询！</h3> : 
                    isLoading ? <h3>Loading......</h3> :
                    isErorrMessage.isAxiosError ? <h3 style={{color:'red'}}>请求错误！</h3> :
                    this.state.users.map((user) => {
                        const {login,avatar_url,html_url,id} = user
                        return (
                            <div className="card" key={id}>
                            <a href={html_url} target="_blank">
                                <img src={avatar_url} style={{width:'100px'}} />
                            </a>
                            <p className="card-text">{login}</p>
                        </div>
                        )
                    })
                }
               
            </div>
        )
    }
}
